<template>
  <div>
    <h1>FlappyBird</h1>
    <button @click="newGame()">新一局</button>
    <button @click="beginStop()">{{ pillarsMove == null ? "开始" : "暂停" }}</button>
    <button @click="birdJump()">跳</button>
    <h4 style="display: inline">分数:{{ nowScore }}</h4>
    <button @click="goBack">返回目录</button>
    <div class="leftBorder"></div>
    <div class="rightBorder"></div>
    <div class="topBorder"></div>
    <div class="bottomBorder"></div>
    <div class="birdStyle" :style="{'top':bird.top+'px'}"></div>
    <span v-for="pillar in pillars" :key="pillar.index">
      <div
        :style="{'position':'absolute',
         'top':pillar.top+'px',
         'left':pillar.left+'px',
         'width':pillar.width+'px',
         'height':pillar.aisle+'px',
         'background-color': '#000000'}">
      </div>
      <div
        :style="{'position':'absolute',
         'top':pillar.top+pillar.aisle+pillar.height+'px',
         'left':pillar.left+'px',
         'width':pillar.width+'px',
         'bottom':pillar.bottom+'px',
         'background-color': '#000000'}">
      </div>
      </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pillarsMove: null,//柱子移动指针
      //柱子数组
      pillars: [
        {
          top: 100,
          aisle: 200,
          left: 900,
          height: 150,
          width: 50,
          bottom: 0,
          needPass: true
        }
      ],
      //鸟类
      bird: {
        top: 300,
        speed: 0
      },
      nowScore: 0//分数
    }
  },
  methods: {
    //返回目录
    goBack() {
      window.history.back()
    },
    //新一局
    newGame() {
      if (this.pillarsMove != null) {
        clearInterval(this.pillarsMove);
        this.pillarsMove = null;
      }
      this.pillars = [
        {
          top: 100,
          aisle: 200,
          left: 900,
          height: 150,
          width: 50,
          bottom: 0,
          needPass: true
        }
      ];
      this.bird = {
        top: 300,
        speed: 0
      };
      this.nowScore = 0;
    },
    //暂停与开始
    beginStop() {
      if (this.pillarsMove == null) {
        this.pillarsMove = setInterval(this.pillarMove, 10);
      } else {
        clearInterval(this.pillarsMove);
        this.pillarsMove = null;
      }
    },
    //柱子及鸟移动的方法
    pillarMove() {
      //柱子移动
      this.pillars.forEach(item => {
        item.left = item.left - 1;
        //分数增加的方法
        if (item.left + item.width <= 500 && item.needPass) {
          this.nowScore = this.nowScore + 1;
          item.needPass = false;
        }
      });
      if ((this.pillars[0].left + this.pillars[0].width) <= 350) {
        this.pillars.splice(0, 1);
      }
      if (this.pillars[this.pillars.length - 1].left == 650) {
        const newAisle = Math.random() * 400;
        const newPillar = {
          top: 100,
          aisle: newAisle,
          left: 900,
          height: 150,
          width: 50,
          bottom: 0,
          needPass: true
        };
        this.pillars.push(newPillar);
      }
      //鸟移动
      this.bird.speed = this.bird.speed + 0.04;
      this.bird.top = this.bird.top + this.bird.speed;
      if (this.gameOver()) {
        alert("游戏结束");
        this.newGame();
      }
      this.$forceUpdate();
    },
    //鸟跳的方法
    birdJump() {
      if (this.pillarsMove != null) {
        this.bird.speed = -2;
      }
    },
    //判断碰撞的方法
    gameOver() {
      //是否碰柱子
      const flag1 = this.pillars.some((item, index) => {
        if (item.left <= 520 && (item.left + item.width) >= 500) {
          if (this.bird.top <= (item.top + item.aisle) || this.bird.top >= (item.top + item.aisle + item.height - 20)) {
            return true;
          }
        }
      });
      //是否碰墙壁
      const flag2 = this.bird.top <= 120 || this.bird.top >= 580;
      return flag1 || flag2;
    }
  }
}
</script>

<style scoped>
.leftBorder {
  position: absolute;
  top: 0px;
  left: 250px;
  width: 100px;
  bottom: 0px;
  background-color: #000000;
}

.rightBorder {
  position: absolute;
  top: 0px;
  left: 900px;
  width: 100px;
  bottom: 0px;
  background-color: #000000;
}

.topBorder {
  position: absolute;
  top: 100px;
  left: 350px;
  width: 550px;
  height: 20px;
  background-color: #000000;
}

.bottomBorder {
  position: absolute;
  top: 600px;
  left: 350px;
  width: 550px;
  bottom: 0px;
  background-color: #000000;
}

.birdStyle {
  position: absolute;
  left: 500px;
  width: 20px;
  background-color: coral;
  height: 20px;
}
</style>
